<template>
  <page-meta :page-style="'overflow:' + (pageshow ? 'hidden' : 'visible')"></page-meta>
  <view class="page">
    <view class="content">
      <view class="content_form" :style="{ height: arrowup ? '40px' : 'auto' }">
        <uv-form labelPosition="left" :model="formData" ref="form" labelWidth="65px">
          <uv-form-item :label="$t('时间筛选')" borderBottom>
            <view class="calendarsitem">
              <view class="calendarsitem-time" @click="calendars?.open">
                <text v-if="formData.casetime.length">{{ formData.casetime.join('-') }}</text>
              </view>
              <view class="calendarsitem-icon">
                <uv-icon v-if="formData.casetime.length" @click.stop="formData.casetime = []"
                  name="close-circle"></uv-icon>
              </view>
            </view>
          </uv-form-item>
          <uv-form-item :label="$t('处理人')" borderBottom>
            <uv-checkbox-group labelColor="#000000" v-model="resultuser">
              <uv-checkbox activeColor="#FD754C" :customStyle="{ flex: 1, justifyContent: 'center' }" :name="0">{{
                $t('所有人') }} &nbsp;
                &nbsp; &nbsp;&nbsp;</uv-checkbox>
              <uv-checkbox activeColor="#FD754C" :customStyle="{ flex: 1, justifyContent: 'center' }" :label="$t('自己')"
                :name="1"></uv-checkbox>
            </uv-checkbox-group>
          </uv-form-item>

          <view class="calendarsitem">
            <view class="calendarsitem-button">
              <uv-button shape="circle" :customStyle="defaultButton" @click="formData = {
                casetime: [],
                identifylabelids: []
              }; resultuser = [0, 1]; identifylabelids = ['5', '2', '1', '125'];refresh()">{{
  $t('重置')
}}</uv-button>
            </view>
            <view class="calendarsitem-button">
              <uv-button shape="circle" :customStyle="submitButton" @click="refresh"> {{ $t('筛选') }}</uv-button>
            </view>
          </view>
        </uv-form>
      </view>
      <view>
        <uv-calendars ref="calendars" :data="formData.casetime" allowSameDay mode="range"
          @confirm="confirm"></uv-calendars>
      </view>
      <view class="bg-set" @click="arrowup = !arrowup">
        <text>{{ arrowup ? $t('更多筛选') : $t('收起') }}</text>
        <uv-icon color="#FD754C" :name="arrowup ? 'arrow-down' : 'arrow-up'"></uv-icon>
      </view>
      <view class="bar">
        <view class="bar-item" @click="bar = true">
          <view :class="bar ? 'bar-active' : ''">
            {{ $t('全部案例') }}
          </view>
        </view>
        <view class="bar-item" @click="bar = false">
          <view :class="!bar ? 'bar-active' : ''">
            {{ $t('待学习') }}
          </view>
        </view>
      </view>
      <uv-list :customStyle="{ backgroundColor: 'initial', width: '100vw' }">
        <uv-list-item v-for="v in list" :key="v.id" :customStyle="{ marginBottom: '12rpx' }">
          <caseitem :data="v" :clickcontent="clickcontent" :identifylabel="identifylabel"></caseitem>
        </uv-list-item>
      </uv-list>
    </view>
    <uv-back-top :customStyle="backtopStyle" :iconStyle="backtopiconStyle" :scroll-top="5000"></uv-back-top>
  </view>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import caseitem from '@/components/case/caseitem.vue';
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app';
import type { Ipagedata, Iuser } from '@/interface';
import api from '@/api';
import { submitButton, defaultButton, backtopStyle, backtopiconStyle } from '@/util/style';
import { watch } from 'vue';
import { inject } from 'vue';
import { getchildrenlast, nocopydeepTree } from '@/util';

const bar = ref(true)
const pageshow = ref(false)

const user = inject<Ref<Iuser>>('user')

const calendars = ref()

function clickcontent(e: Eps.BaseUserCommentEntity) {
  uni.navigateTo({
    url: `/pages/comment/commentinfo?feedbackId=${e.feedbackId}&id=${e.id}`,
  })
}

watch(() => pageshow.value, () => {
  console.log(pageshow.value)
})


const resultuser = ref([1, 0])
const identifylabelids = ref(['5', '2', '1', '125'])
type IformData = {
  identifylabelids: string[],

  casetime: string[],

}

const formData = ref<IformData>({
  identifylabelids: [],

  casetime: []

})


const isRefresh = ref(false)
const finished = ref(false)
const list = ref<Eps.BaseUserCommentEntity[]>([])
let page = ref(0)
let size = ref(20)

const arrowup = ref(true)

function confirm(e: any) {
  formData.value.casetime = [e.range.before, e.range.after]
}
const identifylabel = ref<Eps.identifylabelEntity[]>([])
const treeidentifylabel = ref<Eps.identifylabelEntity[]>([])
onLoad(() => {
  refresh()
  getstore()
  api<Eps.identifylabelEntity[]>('/wechat/identifylabel/list').then(e => {
    identifylabel.value = e;
    treeidentifylabel.value = nocopydeepTree(e);
  }).catch(f => {
    uni.showToast({
      icon: 'error',
      title: f,
      duration: 2000
    });
  })
})

onShow(() => {
  refresh()
})

function _load(page: number): Promise<Ipagedata<Eps.BaseUserCommentEntity>> {

  return api('/wechat/casecomment/page', {
    page,
    size: size.value,
    ...formData.value,
    iscase: 1,
    isstudy: bar.value ? 1 : 0,
    resultuser: resultuser.value.includes(0) ? null : user?.value.tenant_user_id,
    order: "casetime",
    sort: "desc",
  })
}




async function refresh() {
  page.value = 1
  const res = await _load(1)
  list.value = res.list
  isRefresh.value = false
  if (res.list.length < size.value) {
    finished.value = true
  } else {
    finished.value = false
  }
}

onReachBottom(() => {
  load()
})

onPullDownRefresh(() => {
  console.log(45456)
  refresh().then(() => {
    uni.stopPullDownRefresh()
  })
})

const store = ref<Eps.BaseUserShopEntity[]>([])

async function getstore() {
  store.value = await api('/wechat/shop/list')
}


async function load() {
  if (finished.value === false) {
    page.value = page.value + 1
    const res = await _load(page.value)
    if (res.list.length) {
      res.list.forEach((element: any) => {
        list.value.push(element)
      });
      if (res.list.length < size.value) {
        finished.value = true
      }
    } else {
      finished.value = true
    }
  }
}

watch(() => bar.value, () => {
  refresh()
})

watch(() => arrowup.value, e => {
  if (e) {
    refresh()
  }
})


watch(() => identifylabelids.value, e => {
  formData.value.identifylabelids = e.map(c => {
    return getchildrenlast(treeidentifylabel.value.find(t => t.id === c)?.children || []).map(c => c.id)
  }).flat(Infinity)
  refresh()

})

</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  background-color: $uni-bg-def1;


  .content_form {
    width: calc(100vw - 48rpx);
    padding-left: 24rpx;
    padding-right: 24rpx;
    overflow: hidden;
    background-color: $uni-text-color-inverse;
  }

  .view_input {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-items: stretch;
    align-content: flex-start;

    .view_input_left {
      flex: 1;
      overflow: hidden;
      padding-right: 12rpx;
      height: 20px;
      font-size: 15px;
    }

    .view_input_right {
      width: 40rpx;
    }

  }

  .calendarsitem {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;


    .calendarsitem-time {
      flex: 1;
      min-height: 20px;
      text-align: right;
    }

    .calendarsitem-icon {
      width: 80rpx;
      display: flex;
      align-content: center;
      justify-content: center;
    }

    .calendarsitem-button {
      flex: 1;
      margin-top: 12rpx;
      margin-bottom: 12rpx;
      display: flex;
      justify-content: center;
    }

  }

  .bg-set {
    height: 70rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: center;
    background-color: #fff;
    gap: 12rpx;

    text {
      color: #FD754C;
      font-size: 24rpx;
    }
  }

  .bar {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    font-weight: 600;
    line-height: 80rpx;
    margin-bottom: 12rpx;

    .bar-item {
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      flex: 1;
    }

    .bar-active {
      border-bottom: 4rpx solid #FD754C;
    }
  }


}

.popup1 {
  height: 75vh;
}
</style>
